<template
  ><!---->
  <div id="stDetail" class="sceneDetail">
    <!-- <div style="color: rgb(27, 76, 184);margin-bottom: 15px">
      <div class="addressIcon"></div>
      <span>当前位置：</span>
      <span style="cursor: pointer" @click="returnPage">{{ title }}</span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="color: #333">{{ drillDetail.name }}</span>
    </div> -->
    <div style="margin-bottom: 20px;" class="sceneStep">
      <template>
        <div class="step-group">
          <Steps :current="currentIndex" direction="vertical" style="width: 100%;">
            <Step
              title="演练前设置"
              @click.native="toPreCompeManage"
              content="提供演练前演练团队、任务、成员的管理"
              :class="{ curStep: drillStatus == 1 }"
              :icon="drillStatus == 1 ? 'ios-refresh-circle' : ''"
            ></Step>
            <Step
              :title="'演练中管理' + (drillDetail.progress == 5 ? '(已暂停)' : '')"
              @click.native="toCompeingManage"
              content="提供演练过程中的控制,比如开启关闭演练、修改任务信息、对任务显示隐藏的控制、团队禁赛恢复演练、演练过程中答题情况的监控等"
              :class="{ curStep: drillStatus == 2 }"
              :icon="drillStatus == 2 ? 'ios-refresh-circle' : ''"
            ></Step>
            <Step
              title="演练后归档"
              @click.native="toCompeedManage"
              content="提供演练后选手成绩的管理和统计"
              :class="{ curStep: drillStatus == 3 }"
              :icon="drillStatus == 3 ? 'ios-refresh-circle' : ''"
            ></Step>
          </Steps>
          <p
            style="color:#f00;"
            v-if="projectInfo.status == 3 && drillDetail.progress == 4 && endClearConfig"
          >
            【您的环境将于<Time
              :time="destoryTime"
              type="datetime"
            />时自动回收，若仍需保留，请在回收前重新开始配置演练】
          </p>
        </div>
      </template>
      <div class="countdown" v-if="drillDetail.progress != 4">
        <template v-if="drillDetail.progress != 5">
          <span v-if="drillStatus == 1">开始</span
          ><span v-if="drillStatus != 1">结束</span>倒计时：<b
            ><span>{{ time.h }}</span
            >:<span>{{ time.m }}</span
            >:<span>{{ time.s }}</span></b
          >
        </template>
        <strong v-else>
          暂停中
        </strong>
      </div>
      <!--<div style="display:flex;justify-content: space-between;">-->
      <!--:style="{width:drillDetail.progress != 4 ? 'calc(50% - 130px)':''}"-->
      <div class="btn-group">
        <!--<span style="color:#f00;" v-if="projectInfo.status == 3 && drillDetail.progress == 4">【您的环境将于<Time :time="destoryTime" type="datetime" />时自动回收，若仍需保留，请在回收前重新开始配置比赛】</span>-->
        <div class="flex">
          <Poptip
            confirm
            title="确定要释放本次比赛的资源吗？如果确定本次比赛的结果已经统计完毕,请继续."
            @on-ok="clearProject()"
            style="margin-right:5px;"
            transfer
            word-wrap
            width="250"
          >
            <Button type="primary" :ghost="destoryProject()" :disabled="destoryProject()">
              <img src="../../assets/scene/dis-not-deploy.png" alt="" v-if="destoryProject()" />
              <img src="../../assets/scene/not-deploy.png" alt="" v-else />
              <span
                v-if="
                  projectInfo.status == 14 || projectInfo.status == 3 || !projectInfo.statusCHName
                "
              >
                <span v-if="projectInfo.statusCHName">释放资源</span>
                <span v-else>工程不存在</span>
              </span>
              <span v-else>{{ projectInfo.statusCHName }}</span>
            </Button>
          </Poptip>
          <Poptip
            confirm
            title="为确保可视化展示效果，建议使用chrome浏览器查看大屏。"
            @on-ok="showVisualization()"
            transfer
            word-wrap
            width="250"
          >
            <Button type="primary">
              <img src="../../assets/scene/dis-screen.png" />可视化展示
            </Button>
          </Poptip>
          <!-- <Poptip
            confirm
            title="为确保可视化展示效果，建议使用chrome浏览器查看大屏。"
            @on-ok="showVisualizationCusdom()"
            transfer
            word-wrap
            width="250"
          >
            <Button type="primary">
              <img src="../../assets/scene/dis-screen.png" />定制可视化
            </Button>
          </Poptip> -->
          <Poptip
            confirm
            title="为确保可视化展示效果，建议使用chrome浏览器查看大屏。"
            @on-ok="showExample()"
            transfer
            word-wrap
            width="250"
          >
            <Button type="primary" v-if="projectId === 'J94ed50b8f72427597c86528fc9dfbf4'">
              <img src="../../assets/scene/dis-screen.png" />可视化展示
            </Button>
          </Poptip>
          <!--<Dropdown style="margin-left: 20px">
	        <Button type="primary">
	                           可视化展示
	          <Icon type="ios-arrow-down"></Icon>
	        </Button>
	        <DropdownMenu slot="list">
            -->
          <!--<DropdownItem @click.native="showVisualization('common')">通用版</DropdownItem>-->
          <!--<DropdownItem @click.native="showVisualization('pcb')">鹏城版</DropdownItem>-->
          <!--</DropdownMenu>
	      </Dropdown> -->
          <!--
	      <Button type="primary" @click="changeCompetitionStatus('before')" :disabled="beforeContestStatus">
	        <Icon type="md-checkmark" />测试阶段</Button>
	      -->
          <!--<Button type="primary" :ghost="startContestStatus" @click="getTaskList('2')" :disabled="startContestStatus" v-if="drillDetail.progress != 4">
	        <img src="../../assets/scene/dis-start-scene.png" alt="" v-if="startContestStatus"/>
	        <img src="../../assets/scene/start-scene.png" alt="" v-else/>开始演练</Button>
	      <Button type="primary" @click="showModal" v-if="drillDetail.progress == 4">
	        <img src="../../assets/scene/start-scene.png" alt=""/>重新开始演练</Button>
	      <Button type="primary" :ghost="stopContestStatus" @click="getTaskList('4')" :disabled="stopContestStatus">
	        <img src="../../assets/scene/dis-stop-scene.png" alt="" v-if="stopContestStatus"/>
	        <img src="../../assets/scene/stop-scene.png" alt="" v-else/>结束演练</Button>
	      <Button type="primary" :ghost="drillDetail.progress != 2" @click="changeCompetitionStatus(5)" :disabled="drillDetail.progress != 2" v-if="drillDetail.progress != 5">
	        <img src="../../assets/scene/dis-stop-scene.png" alt="" v-if="drillDetail.progress != 2"/>
	        <img src="../../assets/scene/stop-scene.png" alt="" v-else/>暂停演练</Button>
	      <Button type="primary" :ghost="drillDetail.progress != 5" @click="changeCompetitionStatus(2)" :disabled="drillDetail.progress != 5" v-if="drillDetail.progress == 5">
	        <img src="../../assets/scene/dis-start-scene.png" alt="" v-if="drillDetail.progress != 5"/>
	        <img src="../../assets/scene/start-scene.png" alt="" v-else/>恢复演练</Button>-->
          <Poptip
            confirm
            title="确定要开始演练？"
            @on-ok="getTaskList('2')"
            transfer
            v-if="drillDetail.progress != 4"
            word-wrap
          >
            <Button
              type="primary"
              :ghost="startContestStatus || disabledAllBtn || disStartCompete"
              :disabled="startContestStatus || disabledAllBtn || disStartCompete"
            >
              <img
                src="../../assets/scene/dis-start-scene.png"
                alt=""
                v-if="startContestStatus || disabledAllBtn || disStartCompete"
              />
              <img src="../../assets/scene/start-scene.png" alt="" v-else />开始演练</Button
            >
          </Poptip>
          <Button
            type="primary"
            @click="showModal()"
            v-if="drillDetail.progress == 4"
            :ghost="disabledAllBtn"
            :disabled="disabledAllBtn"
          >
            <img src="../../assets/scene/dis-start-scene.png" alt="" v-if="disabledAllBtn" />
            <img src="../../assets/scene/start-scene.png" alt="" v-else />重新开始演练</Button
          >
          <Button
            type="primary"
            @click="showDelayModal()"
            v-if="drillStatus == 2"
            :ghost="disabledAllBtn"
            :disabled="disabledAllBtn"
          >
            <img src="../../assets/scene/dis-delay.png" alt="" v-if="disabledAllBtn" />
            <img src="../../assets/scene/delay.png" alt="" v-else />延迟演练</Button
          >
          <Poptip
            confirm
            title="确定要重置环境？"
            @on-ok="resetEnviron()"
            transfer
            v-if="drillDetail.progress == 4 && cloudType !== 'h3c'"
            word-wrap
          >
            <Button
              type="primary"
              :ghost="disabledAllBtn || resetStatus == 1"
              :disabled="disabledAllBtn || resetStatus == 1"
            >
              <template v-if="resetStatus == 1">
                <Progress
                  :percent="resetProgress"
                  :stroke-width="10"
                  style="width:90px"
                  v-if="resetStatus == 1 && drillDetail.progress == 4"
                >
                  <span>重置{{ resetProgress }}%</span>
                </Progress>
                <!--<Icon type="ios-information-circle-outline" :size="20" v-if="resetStatus == 2"/>-->
                <!--<p>正在重置环境...</p>-->
              </template>
              <template v-else>
                <img
                  src="../../assets/scene/dis-reset-network.png"
                  alt=""
                  height="16"
                  v-if="disabledAllBtn"
                />
                <img src="../../assets/scene/reset-network.png" alt="" height="16" v-else />重置环境
              </template>
              <!--{{resetStatus}}-->
              <Icon
                type="ios-information-circle-outline"
                :size="16"
                @click.stop="getResetDetail"
                v-if="resetFail"
                style="vertical-align:text-bottom;"
              />
            </Button>
          </Poptip>
          <Poptip confirm title="确定要结束演练？" @on-ok="getTaskList('4')" transfer word-wrap>
            <Button
              type="primary"
              :ghost="stopContestStatus || disabledAllBtn"
              :disabled="stopContestStatus || disabledAllBtn"
            >
              <img
                src="../../assets/scene/dis-stop-scene.png"
                alt=""
                v-if="stopContestStatus || disabledAllBtn"
              />
              <img src="../../assets/scene/stop-scene.png" alt="" v-else />结束演练</Button
            >
          </Poptip>
          <Poptip
            confirm
            title="确定要暂停演练？"
            @on-ok="pauseCompetition"
            transfer
            v-if="drillDetail.progress != 5"
            word-wrap
          >
            <Button
              type="primary"
              :ghost="drillDetail.progress != 2 || disabledAllBtn"
              :disabled="drillDetail.progress != 2 || disabledAllBtn"
            >
              <img
                src="../../assets/scene/dis-pause-scene.png"
                alt=""
                v-if="drillDetail.progress != 2 || disabledAllBtn"
              />
              <img src="../../assets/scene/pause-scene.png" alt="" v-else />暂停演练</Button
            >
          </Poptip>
          <Poptip
            confirm
            title="确定要恢复演练？"
            @on-ok="restoreCompetition"
            transfer
            v-if="drillDetail.progress == 5 || disabledAllBtn"
            word-wrap
          >
            <Button
              type="primary"
              :ghost="drillDetail.progress != 5"
              :disabled="drillDetail.progress != 5 || disabledAllBtn"
            >
              <img
                src="../../assets/scene/dis-recover-scene.png"
                alt=""
                v-if="drillDetail.progress != 5 || disabledAllBtn"
              />
              <img src="../../assets/scene/recover-scene.png" alt="" v-else />恢复演练</Button
            >
          </Poptip>
          <Button type="primary" @click="boardModal = true">
            <img src="../../assets/scene/dis-boardcast.png" alt="" />发送公告</Button
          >
          <Button type="primary" @click="gotoReportPage" v-if="drillDetail.progress == 4">
            <img src="../../assets/scene/btn-report.png" />报告</Button
          >
          <Poptip
            confirm
            title="确定要清空场景公告及聊天消息？"
            @on-ok="clearSceneNoticeAndChat()"
            transfer
            word-wrap
          >
            <Button type="primary">清空场景公告及聊天信息</Button>
          </Poptip>
          <Button
            type="primary"
            @click="handleGoCircumstances"
            v-if="$store.state.common.sysConfig.modeConfig != '1'"
            >进入环境</Button
          >
          <Poptip
            v-if="showTestCusdomEffect == true"
            confirm
            title="选择源机器、目标机器以及对应的事件和类型，可以在定制可视化页面查看对应的效果。"
            @on-ok="testCusdomEffect()"
            transfer
            word-wrap
            width="250"
          >
            <Button
              type="primary"
              :disabled="disabledAllBtn"
              :ghost="disabledAllBtn"
              :class="{ disabled: disabledAllBtn, 'not-disabled': !disabledAllBtn }"
            >
              <Icon type="md-desktop" /> 测试定制效果
            </Button>
          </Poptip>
          <script-data
            v-if="showScriptData == true"
            :ghost="disabledAllBtn"
            :disabled="disabledAllBtn"
            btnText="大屏脚本数据"
            :projectId="projectId"
          ></script-data>
          <attack-script-data
            v-if="showAttackScriptData == true"
            :ghost="disabledAllBtn"
            :disabled="disabledAllBtn"
          ></attack-script-data>
          <!--<Button type="warning" v-if="drillDetail.progress != 4"><span v-if="drillStatus == 1">开始</span><span v-if="drillStatus != 1">结束</span>倒计时：<span><span>{{time.h}}</span>:<span>{{time.m}}</span>:<span>{{time.s}}</span></span></Button>-->
          <!--gotoReportPage-->
        </div>
        <div style="margin-top:5px;">
          <span style="color:#ff9900;font-size:14px"
            ><Icon
              type="ios-information-circle-outline"
              :size="16"
            />开始演练前请先完成团队人员配置和任务分配,如果已经完成配置,开始按钮不可点, 请点击</span
          ><a @click="validateStart" :disabled="notOwn || disabledAllBtn" style="font-size: 14px;"
            >校验</a
          >
        </div>
        <div style="margin-top:5px;" v-if="notOwn">
          <span style="color:#ff9900;font-size:14px"
            ><Icon
              type="ios-information-circle-outline"
              :size="16"
            />非本人创建的演练项目无法校验</span
          >
        </div>
        <div style="margin-top:5px;">
          <span style="color:#ff9900;font-size:14px"
            ><Icon
              type="ios-information-circle-outline"
              :size="16"
            />如果演练环境已经被改变，“重新开始演练”前请先“重置环境”</span
          >
        </div>
        <ChatRoom
          v-if="!notOwn"
          :drillId="drillid"
          class="btn-chat"
          :isDistributed="isDistributed"
          ref="chatRoom"
        ></ChatRoom>
      </div>
    </div>
    <div class="span-group">
      <span style="margin-right: 10px">
        演练结束后24小时是否自动销毁环境：<Tag color="blue">{{ endClearConfigShow }}</Tag>
        <Poptip
          confirm
          :title="changeEndClearConfigTip"
          :disabled="disChangeEndClearConfig"
          @on-ok="changEndClearConfig()"
        >
          <Button
            type="primary"
            shape="circle"
            icon="md-repeat"
            style="padding: 0"
            :disabled="disChangeEndClearConfig"
            size="small"
          ></Button>
        </Poptip>
      </span>
      <span style="margin-right: 10px;">
        答题模式：<Tag color="blue">{{ drillDetail | stModeFilter }}</Tag>
      </span>
      <span style="margin-right: 10px;">
        提交报告模式：<Tag color="blue">{{ wpUpMode == 2 ? '针对任务提交' : '针对演练提交' }}</Tag>
      </span>
    </div>
    <Tabs
      class="demo-tabs-style2"
      @on-click="changePreTab"
      v-show="preCompeManagePanelShow"
      :value="preDefault"
    >
      <TabPane label="演练团队管理" name="accessGroup" :index="1">
        <AccessUserToGroup
          v-if="preDefault == 'accessGroup'"
          :disabledAllBtn="disabledAllBtn"
          :type="7"
          @setHasUser="setHasUser"
          step="pre"
          :isDistributed="isDistributed"
        ></AccessUserToGroup>
      </TabPane>
      <TabPane label="接入机器分配" name="accessVm" :index="2">
        <AccessVmToUser
          v-if="preDefault == 'accessVm'"
          :disabledAllBtn="disabledAllBtn"
          :type="7"
          :isDistributed="isDistributed"
        ></AccessVmToUser>
      </TabPane>
      <TabPane label="演练任务配置" name="targetTeam" :index="3">
        <TargetTeam
          v-if="preDefault == 'targetTeam'"
          :disabledAllBtn="disabledAllBtn"
          :type="7"
          :isDistributed="isDistributed"
          :drillDetailProgress="drillDetail.progress"
        ></TargetTeam>
      </TabPane>
      <TabPane label="任务分配" name="targetAllot" :index="4">
        <TargetAllot
          v-if="preDefault == 'targetAllot'"
          :disabledAllBtn="disabledAllBtn"
          :type="7"
          @setHasTarget="setHasTarget"
          step="pre"
        ></TargetAllot>
      </TabPane>
      <TabPane label="计分规则" name="scoreRule" key="scoreRule" :index="5" v-if="scoreMode == 1">
        <ScoreRule
          v-if="preDefault == 'scoreRule'"
          :configMode="2"
          :sceneType="7"
          :typeExcel="7"
          :disabledAllBtn="disabledAllBtn"
        ></ScoreRule>
      </TabPane>
      <TabPane label="流量过滤" name="flow" :index="6">
        <Flow v-if="preDefault == 'flow'" :isDistributed="isDistributed"></Flow>
      </TabPane>
      <TabPane label="静态Flag配置" name="flagOut" :index="7">
        <FlagOut
          v-if="preDefault == 'flagOut'"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
          :isMainRange="isMainRange"
        ></FlagOut>
      </TabPane>
      <TabPane label="动态Flag配置" name="flagOutLoop" :index="8">
        <FlagOutLoop
          v-if="preDefault == 'flagOutLoop'"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
        ></FlagOutLoop>
      </TabPane>
      <TabPane label="Flag服务器配置" name="flagVmOnce" :index="9">
        <FlagVmOnce v-if="preDefault == 'flagVmOnce'" :disabledAllBtn="disabledAllBtn"></FlagVmOnce>
      </TabPane>
      <TabPane label="Checker任务" name="checker" :index="10">
        <Checker
          v-if="preDefault == 'checker'"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
        ></Checker>
      </TabPane>
      <TabPane label="分靶场信息" name="rangeInformation" :index="11" v-if="isMainRange == 1">
        <RangeInformation
          v-if="preDefault == 'rangeInformation'"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
        ></RangeInformation>
      </TabPane>
    </Tabs>
    <Tabs
      class="demo-tabs-style2"
      @on-click="changeMidTab"
      v-if="compeingManagePanelShow"
      :value="midDefault"
    >
      <TabPane label="任务分配统计" name="targetTeamMid" :index="1">
        <!--:show="midDefault == 'targetTeamMid'"-->
        <TargetTeamMid
          v-if="midDefault == 'targetTeamMid'"
          :type="7"
          :poll="true"
          step="mid"
          :drillDetail="drillDetail"
        ></TargetTeamMid>
      </TabPane>
      <TabPane label="团队排行统计" name="teamRankStatic" :index="2">
        <teamRankStatic
          :type="7"
          v-if="scoreMode == 0 && midDefault == 'teamRankStatic'"
          :poll="true"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
        ></teamRankStatic>
        <zhTeamRankStatic
          :type="7"
          v-if="scoreMode == 1 && midDefault == 'teamRankStatic'"
          :poll="true"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
        ></zhTeamRankStatic>
      </TabPane>
      <TabPane label="任务被攻破排名" name="targetStatic" :index="3">
        <target-static v-if="midDefault == 'targetStatic'" :drillDetail="drillDetail" />
      </TabPane>
      <!--<TabPane label="团队统计" name="teamAttack">
          	<team-attack v-if ="midDefault == 'teamAttack'" :drillDetail="drillDetail"/>
          </TabPane>-->
      <TabPane label="选手接入机器录屏" name="tab6" :index="4">
        <screenController
          v-if="midDefault == 'tab6'"
          :type="7"
          :isDistributed="isDistributed"
          :isMainRange="isMainRange"
        ></screenController>
      </TabPane>
      <TabPane label="报告统计" name="reportStatic" :index="5">
        <ReportList
          v-if="midDefault == 'reportStatic'"
          :wpUpMode="wpUpMode"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
          :scoreMode="scoreMode"
        ></ReportList>
      </TabPane>
      <TabPane label="提交统计" name="submitRecord" :index="6">
        <submitRecord v-if="midDefault == 'submitRecord'" :poll="true" :type="7"></submitRecord>
      </TabPane>
      <TabPane label="任务异常日志" name="targetExceptionLog" :index="7">
        <TargetExceptionLog
          v-if="midDefault == 'targetExceptionLog'"
          :type="7"
        ></TargetExceptionLog>
      </TabPane>
      <TabPane label="流量查询" name="flowList" :index="8">
        <flow-list v-if="midDefault == 'flowList'"></flow-list>
      </TabPane>
      <TabPane label="环境管理" name="environManage" :index="9">
        <!--<Alert>提供的功能：提供参赛团队的提交flag记录，提供正确提交的撤销和恢复撤销。</Alert>-->
        <EnvironManage v-if="midDefault == 'environManage'"></EnvironManage>
      </TabPane>
    </Tabs>
    <Tabs
      class="demo-tabs-style2"
      @on-click="changeEndTab"
      v-if="compeedManagePanelShow"
      :value="endDefault"
    >
      <TabPane label="任务分配统计" name="targetTeamMid" :index="1">
        <TargetTeamMid
          v-if="endDefault == 'targetTeamMid'"
          :type="7"
          step="end"
          :drillDetail="drillDetail"
        ></TargetTeamMid>
      </TabPane>
      <TabPane label="团队排行统计" name="teamRankStatic" :index="2">
        <teamRankStatic
          :type="7"
          v-if="scoreMode == 0 && endDefault == 'teamRankStatic'"
          :poll="true"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
        ></teamRankStatic>
        <zhTeamRankStatic
          :type="7"
          v-if="scoreMode == 1 && endDefault == 'teamRankStatic'"
          :poll="true"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
        ></zhTeamRankStatic>
      </TabPane>
      <TabPane label="任务被攻破排名" name="targetStatic" :index="3">
        <target-static v-if="endDefault == 'targetStatic'" :drillDetail="drillDetail" />
      </TabPane>
      <!--<TabPane label="团队统计" name="teamAttack">
				<team-attack v-if ="endDefault == 'teamAttack'" :drillDetail="drillDetail"/>
			</TabPane>-->
      <TabPane label="报告统计" name="reportStatic" :index="4">
        <ReportList
          v-if="endDefault == 'reportStatic'"
          :wpUpMode="wpUpMode"
          :type="7"
          :disabledAllBtn="disabledAllBtn"
          :drillDetail="drillDetail"
          :scoreMode="scoreMode"
        ></ReportList>
      </TabPane>
      <TabPane label="团队积分" name="adwTeamIntegral" :index="5">
        <adwDrillIntegral
          v-if="endDefault == 'adwTeamIntegral'"
          :type="0"
          :sceneType="4"
          :disabledAllBtn="disabledAllBtn"
        ></adwDrillIntegral>
      </TabPane>
      <TabPane label="个人积分" name="adwUserIntegral" :index="6">
        <adwDrillIntegral
          v-if="endDefault == 'adwUserIntegral'"
          :type="1"
          :sceneType="4"
          :disabledAllBtn="disabledAllBtn"
        ></adwDrillIntegral>
      </TabPane>
      <TabPane label="问卷调查" name="questionnaire" v-if="questionnaireList.length > 0" :index="7">
        <Questionnaire
          v-if="endDefault == 'questionnaire'"
          :questionnaireList="questionnaireList"
        ></Questionnaire>
      </TabPane>
      <TabPane label="点评" name="Remark" v-if="isRemark == true" :index="8">
        <Remark :testid="testid" :projectId="projectId"></Remark>
      </TabPane>
      <TabPane label="录屏回放" name="tab6" :index="9">
        <screenController
          v-if="endDefault == 'tab6'"
          :poll="false"
          :type="7"
          :isDistributed="isDistributed"
          :isMainRange="isMainRange"
        ></screenController>
      </TabPane>
    </Tabs>
    <Modal v-model="boardModal" title="发送公告" :width="650" footer-hide>
      <board
        v-if="boardModal"
        @hideModal="hideModal"
        :isDistributed="isDistributed"
        :isMainRange="isMainRange"
      ></board>
    </Modal>
    <Modal
      v-model="sceneModal.show"
      :title="sceneModal.title"
      :loading="sceneModal.loading"
      :mask-closable="false"
      @on-ok="saveScene('formValidate')"
      @on-cancel="handleReset('formValidate')"
      :width="600"
    >
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="时间" prop="Dates">
          <DatePicker
            :editable="false"
            type="datetimerange"
            :value="formValidate.Dates"
            format="yyyy-MM-dd HH:mm"
            placement="bottom-start"
            confirm
            ref="datePicker"
            placeholder="选择日期"
            style="width: 280px"
            transfer
            @on-ok="clickOkBtn"
            @on-clear="clickClearBtn"
            @on-open-change="switchOpenChange"
            @on-change="changeDates"
          ></DatePicker>
          <p style="color:#ff9900;font-size:10px">选择同一天的时间段，请先双击要选择的日期</p>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="sceneDelayModal.show"
      :title="sceneDelayModal.title"
      :loading="sceneDelayModal.loading"
      :mask-closable="false"
      @on-ok="saveSceneDelayTime('formValidate1')"
      @on-cancel="handleReset('formValidate1')"
      :width="600"
    >
      <Form ref="formValidate1" :model="formValidate" :rules="delayRuleValidate" :label-width="80">
        <FormItem label="结束时间" prop="endDate">
          <DatePicker
            :editable="false"
            type="datetime"
            v-model="formValidate.endDate"
            format="yyyy-MM-dd HH:mm"
            placement="bottom-start"
            placeholder="选择日期"
            style="width: 280px"
            transfer
            @on-change="changeEndDate"
          ></DatePicker>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="tipModal.show" :title="tipModal.title" width="300" footer-hide>
      <h4>
        <Icon
          type="ios-loading"
          size="24"
          class="demo-spin-icon-load"
          style="margin-right:24px;"
        ></Icon
        >{{ tipModal.content }}
      </h4>
    </Modal>
    <Modal v-model="resetDetailModal.show" :title="resetDetailModal.title" width="800" footer-hide>
      <Button type="primary" ghost size="small" @click="rebuildAllFailVm" v-if="resetFail">
        <img
          src="../../assets/scene/dis-reset-network.png"
          alt=""
          style="vertical-align: middle;"
        />重置所有重置失败节点
      </Button>
      <Table :columns="resetCol" :data="resetInfo.msgs" style="margin-top:10px;"></Table>
    </Modal>
    <cusdomEffect ref="cusdomEffect"></cusdomEffect>
  </div>
</template>

<script>
import Remark from '@/view/drill_compete/page/remark'
import Questionnaire from '@/view/drill_compete/page/questionnaire'
import { getQuestionnaireSurveyList } from '@/api/questionnaire-survey'
import RangeInformation from '@/view/drill_compete/page/rangeInformation'
import TargetTeam from '@/view/drill_compete/page/targetTeam/targetTeam-zh' //靶机
import TargetAllot from '@/view/drill_compete/page/targetTeam/targetTeamAllot-zh'
import AccessVmToUser from '@/view/drill_compete/page/accessVmToUser'
import Flow from '@/view/drill_compete/page/flow-new'
import TargetTeamMid from '@/view/drill_compete/page/targetTeam/targetTeam-mid-new'
import FlagCommitOnce from '@/view/drill_compete/page/task_new/flagCommitOnce'
import Checker from '@/view/drill_compete/page/task_new/checker'
import FlagOutLoop from '@/view/drill_compete/page/task_new/flagOutLoop.vue'
import FlagVmOnce from '@/view/drill_compete/page/flagVmOnce'
import AccessUserToGroup from '@/view/drill_compete/page/accessUserToGroup'
import TargetExceptionLog from '@/view/drill_compete/page/targetExceptionLog'
import Protocol from '@/view/drill_compete/page/protocol.vue'
import QGAWrite from '@/view/drill_compete/page/qgaWrite/qgawrite.vue'
import teamRankStatic from '@/view/drill_compete/page/statistics/stTeamRankStatic'
import zhTeamRankStatic from '@/view/drill_compete/page/statistics/zhTeamRankStatic'
import adwDrillIntegral from '@/view/drill_compete/page/statistics/awdDrillIntegral.vue'
import submitRecord from '@/view/drill_compete/page/statistics/submitRecord.vue'
import FlowList from '@/view/drill_compete/page/flow-list.vue'
import FlagOut from '@/view/drill_compete/page/task_new/flagOut.vue'
import board from '@/components/board-cast/drillBoardcast.vue'
import EnvironManage from '@/view/drill_compete/page/environManage.vue'
import ChatRoom from '@/components/chatRoom/chatRoom'
import ReportList from '@/view/drill_compete/page/report-list'
import ScoreRule from '@/view/drill_compete/page/hw/scoreRule'
import encryption from '@/libs/encryption.js'
import {
  getSceneInfo,
  updateSceneProgress,
  setSceneCycle,
  modifyScene,
  batchOpVm,
  batchOpVmLog,
  batchOpVmLogOnce,
  rebuildVm
} from '@/api/drill_compete'
import { clearProject } from '@/api/competition'
import { getTaskList, batchActiveTask, getstatusbyprjid } from '@/api/drill'
import { clearSceneNoticeAndChat } from '@/api/boardcast_new.js'
import { getDictInfoByName, getSysConfigList } from '@/api/dict.js'
import timer from '@/mixin/timer'
import commonFun from './mixin.js'
import screenController from '@/view/drill_compete/page/screenController'
import TargetStatic from './page/multiple/targetStatic'
import recoverTime from '@/mixin/recoverTime'
import destroyEnv from '@/mixin/destroyEnvironmentMixin'
import cusdomEffect from './cusdomEffect.vue'
import resetSceneMixin from '@/mixin/resetSceneMixin'
import ScriptData from '@/components/script-data'
import AttackScriptData from '@/components/attack-script-data'
import { mapState } from 'vuex'
export default {
  name: 'scenes',
  components: {
    AttackScriptData,
    ScriptData,
    FlowList,
    TargetStatic,
    screenController,
    TargetTeam, //靶机--演练前
    TargetAllot,
    Flow, //流量过滤
    TargetTeamMid, //靶机--演练中（type="mid"）会轮询，需传show,
    FlagCommitOnce, //flag单次提交
    Checker, //check任务
    FlagOutLoop, //
    FlagVmOnce, //Flag服务器配置
    AccessVmToUser, //（环境）接入机器
    AccessUserToGroup, //（演练用户管理）分配用户
    TargetExceptionLog, //靶标异常日志,
    Protocol,
    QGAWrite,
    teamRankStatic,
    zhTeamRankStatic,
    adwDrillIntegral, //排名统计,
    submitRecord, //提交统计
    FlagOut,
    board,
    EnvironManage,
    ChatRoom,
    ReportList,
    RangeInformation,
    cusdomEffect, //测试可视化效果,
    ScoreRule,
    Questionnaire,
    Remark
  },
  mixins: [timer, commonFun, recoverTime, destroyEnv, resetSceneMixin],
  data() {
    let September = sessionStorage.getItem('November')
    September = JSON.parse(encryption.SelfUseDecrypt(September))
    const validateDate = (rule, value, callback) => {
      //验证只能填入数字
      //var reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
      //验证警戒值
      if (value) {
        if (!this.formValidate.startTime || !this.formValidate.endTime) {
          callback(new Error('请选择时间'))
        } else if (
          new Date(this.formValidate.endTime).getTime() -
            new Date(this.formValidate.startTime).getTime() <
          60 * 60 * 1000
        ) {
          callback(new Error('起止时间最小间隔一个小时'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateDelayDate = (rule, value, callback) => {
      //验证只能填入数字
      //var reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
      //验证警戒值
      if (value) {
        if (new Date(value).getTime() - new Date(this.drillDetail.endTime).getTime() <= 0) {
          callback(new Error('选择的时间必须大于当前结束时间'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请选择时间'))
      }
    }
    return {
      isQuestion: false,
      isRemark: false,
      showAttackScriptData: false,
      showScriptData: false,
      questionnaireList: [],
      isDistributed: 0,
      isScheme: 0,
      isMainRange: 0,
      USER_ID: September.userId,
      USER_Name: September.nickname,
      isRootDesigner: September.isRootDesigner,
      projectId: this.$route.query.prjid,
      drillid: this.$route.query.id,
      drillName: this.$route.query.name,
      drillDetail: {},
      testid: this.$route.query.id, //工程场景id
      currentIndex: 0,
      preCompeManagePanelShow: true,
      compeingManagePanelShow: false,
      compeedManagePanelShow: false,
      startContestStatus: false,
      stopContestStatus: false,
      preDefault: '',
      midDefault: '',
      endDefault: '',
      drillStatus: '',
      backObj: {
        path: '/multipleDrill',
        name: 'multipleDrill',
        query: {
          //pane:'drillSencen',
          page: this.$route.query.page
        },
        meta: {
          requireAuth: true
        }
      },
      project: {
        drillitemname: this.$route.query.name,
        projectid: this.$route.query.prjid,
        drillitemid: this.$route.query.id,
        testId: this.$route.query.id
      },
      projectInfo: {},
      timeoutP: {},
      timeout: {},
      boardModal: false,
      compReportModal: false,
      sceneModal: {
        show: false,
        title: '修改时间',
        loading: true,
        type: 1,
        width: 550
      },
      sceneDelayModal: {
        show: false,
        title: '延迟比赛时间',
        loading: true,
        type: 1,
        width: 550
      },
      formValidate: {
        //      	"createTime":"2020-02-13T08:55:46.545Z",
        //      	"creator":"string",
        cycleTime: 1,
        description: '',
        endTime: '',
        extension: '',
        iconPath: '',
        id: '',
        name: '',
        progress: 0, // 0.准备中、1.准备完毕、2.开始中、3.裁判评判阶段、4.结束
        projectId: '',
        projectName: '',
        startTime: '',
        status: 1, //0 ：不启用 1：启用
        type: 0, //0.对抗演练、1.攻防赛、2夺旗赛、3知识赛、4渗透演练
        Dates: [],
        stMode: 0,
        endDate: ''
      },
      ruleValidate: {
        Dates: [
          { required: true, type: 'array', message: '不能为空', trigger: 'change' },
          { validator: validateDate, trigger: 'change' }
        ]
      },
      delayRuleValidate: {
        endDate: [
          //	          	{ required: true,message: '不能为空', trigger: 'change' },
          { validator: validateDelayDate, trigger: 'change' }
        ]
      },
      disabledDestroy: false,
      destoryTime: '',
      tipModal: {
        title: '提示',
        show: false,
        content: ''
      },
      queryOpLogInfo: {
        pageIndex: 1,
        pageSize: 10,
        projectId: this.$route.query.prjid,
        action: 'rebuild'
      },
      resetProgress: 0,
      resetInfo: {},
      resetStatus: 0,
      resetFail: false,
      resetDetailModal: {
        title: '重置详情',
        show: false
      },
      resetCol: [
        {
          title: '虚拟机名称',
          key: 'name'
        },
        {
          title: '实例名称',
          key: 'instanceName'
        },
        {
          title: '系统类型',
          key: 'sysType'
        },
        {
          title: '子网络名称',
          key: 'networkName'
        },
        {
          title: '镜像名称',
          key: 'imageName'
        },
        {
          title: '状态',
          key: 'errMsg',
          render: (h, params) => {
            return h(
              'Tag',
              {
                props: {
                  color: params.row.errMsg ? 'red' : 'green'
                }
              },
              params.row.errMsg ? '重置失败' : '重置成功'
            )
          }
        },
        {
          title: '错误信息',
          key: 'errMsg',
          render: (h, params) => {
            return h('span', params.row.errMsg || '无')
          }
        }
      ],
      // extension: {},
      showTestCusdomEffect: false
    }
  },
  provide() {
    return {
      parent: this
    }
  },
  filters: {
    stModeFilter: function(value) {
      if (!value) {
        return '随意答题'
      }
      let extension = value.extension
      try {
        extension = JSON.parse(extension)
      } catch (e) {
        extension = {}
      }
      return extension.stMode === 1 ? '随意答题' : '顺序答题'
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
    clearInterval(this.timeoutP)
    clearTimeout(this.setTimeInter)
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === '/multipleDrill') {
      //to.query.page = this.$route.query.page
      next()
    } else {
      //跳转至非自核演练页面，清空存储的查询条件
      sessionStorage.removeItem('queryObj')
      next()
    }
  },
  watch: {
    drillStatus(val, oldVal) {
      if (val != oldVal && oldVal) {
        this.getDrillDetail(true, true)
      }
    },
    refreshTime(val, oldVal) {
      if (val != oldVal) {
        this.getDrillDetail(true, true)
      }
    }
  },
  computed: {
    ...mapState('board', ['refreshTime']), //分布式重新获取详情 数据
    notOwn() {
      return this.USER_ID !== this.drillDetail.creator
    },
    wpUpMode() {
      return this.extension.wpUpMode
    },
    scoreMode() {
      return this.extension.scoreMode || 0
    },
    extension() {
      return (this.drillDetail.extension && JSON.parse(this.drillDetail.extension)) || {}
    },
    disabledAllBtn() {
      if (this.projectInfo.status != 3 || this.drillDetail.creator != this.USER_ID) {
        return true
      }
      if (JSON.parse(this.drillDetail.extension).isDistributed) {
        if (JSON.parse(this.drillDetail.extension).isMainRange != 1) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
      // return this.projectInfo.status != 3 || this.drillDetail.creator != this.USER_ID;
    },
    title() {
      //当前菜单显示名
      return this.$store.getters.pageTitle
    }
  },
  mounted() {
    this.getDrillDetail(true, true).then((data) => {
      this.$store.commit('addBreadItem', { name: this.drillDetail.name })
      //判断是否可以开始比赛
      this.canStartCompete(this.drillDetail.type)
    })
    this.getProjectInfo()
    this.getQuestionnaire()
    sessionStorage.removeItem('vmCurrentPage')
    this.getSysConfigList()
    this.isQuestion = this.$route.query.isQuestion
    // this.getDictInfoByNamedianping();
  },
  methods: {
    //进入环境
    handleGoCircumstances() {
      if (this.$store.state.common.sysConfig.modeConfig == '2') {
        this.$Message.info('未授权功能，请联系管理员')
      } else if (this.$store.state.common.sysConfig.modeConfig == 'jizhi2024') {
        window.open(
          `/14-topologyProject/index.html#/topologyDisplay/topologys?projectId=${this.$route.query.prjid}`
        )
      }
    },
    getSysConfigList() {
      getSysConfigList().then((data) => {
        let { code, attribute } = data
        if (code === 1) {
          let dataList = attribute.dataList
          // 是否显示点评
          let remarkConfig = dataList.find((item) => item.name === 'remark')
          if (remarkConfig) {
            this.isRemark = remarkConfig.value === '1'
          } else {
            this.isRemark = false
          }
          // 是否显示测试定制效果
          let showTestCusdomEffect = dataList.find((item) => item.name === 'showTestCusdomEffect')
          if (showTestCusdomEffect) {
            this.showTestCusdomEffect = showTestCusdomEffect.value === '1'
          } else {
            this.showTestCusdomEffect = false
          }
          // 是否显示大屏脚本数据
          let showScriptData = dataList.find((item) => item.name === 'showScriptData')
          if (showScriptData) {
            this.showScriptData = showScriptData.value === '1'
          } else {
            this.showScriptData = false
          }
          // 是否显示攻击脚本数据
          let showAttackScriptData = dataList.find((item) => item.name === 'showAttackScriptData')
          if (showAttackScriptData) {
            this.showAttackScriptData = showAttackScriptData.value === '1'
          } else {
            this.showAttackScriptData = false
          }
        }
      })
    },
    getDictInfoByNamedianping() {
      getDictInfoByName({ name: 'remark' }).then(({ code, attribute, message }) => {
        if (code == 1) {
          this.isRemark = attribute.data.value === '1'
        } else {
          if (message === '没查询到数据') {
            // 该数据没有查询到时，并不需要提示错误信息
            this.isRemark = false
            return
          }
          this.isRemark = false
          this.$Message.warning(message)
        }
      })
    },
    getQuestionnaire() {
      let paramas = {
        pageIndex: 1,
        pageSize: 999,
        sceneId: this.drillid
      }
      getQuestionnaireSurveyList(paramas).then((res) => {
        console.log(res, 1111111111111111)
        if (res.code == 1) {
          this.questionnaireList = res.data.items
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    getProjectInfo() {
      if (!this.$route.query.prjid) {
        return
      }
      this.disabledDestroy = false
      getstatusbyprjid(this.$route.query.prjid).then((data) => {
        if (data.code == 1) {
          this.projectInfo = data.attribute.project
          this.networkInfo = data.attribute.network
          if (
            this.projectInfo.status == 0 ||
            this.projectInfo.status == 10 ||
            this.projectInfo.status == 14
          ) {
            clearInterval(this.timeoutP)
          }
        } else if (data.code == -2) {
          this.projectInfo.statusCHName = '工程不存在'
          this.disabledDestroy = true
        } else {
          this.$Message.error(data.message)
        }
      })
    },
    getDrillDetail(needChangeStep, needServiceTime, setParams) {
      //是否需要切换步骤,是否需要服务时间请求
      return new Promise((resolve, reject) => {
        getSceneInfo(this.drillid).then((data) => {
          let startTimeChange = false
          let endTimeChange = false
          if (data.data.startTime != this.drillDetail.startTime) {
            startTimeChange = true
          }
          if (data.data.endTime != this.drillDetail.endTime) {
            endTimeChange = true
          }
          this.drillDetail = data.data

          if (JSON.parse(this.drillDetail.extension).isScheme) {
            // 判断是否是黄方下发的任务
            this.isScheme = JSON.parse(this.drillDetail.extension).isScheme
          }

          if (JSON.parse(this.drillDetail.extension).isDistributed) {
            this.isDistributed = JSON.parse(this.drillDetail.extension).isDistributed
          }
          if (JSON.parse(this.drillDetail.extension).isMainRange) {
            this.isMainRange = JSON.parse(this.drillDetail.extension).isMainRange
          }
          this.destoryTime = new Date(this.drillDetail.endTime).getTime() + 24 * 60 * 60 * 1000
          if (setParams == 'setEndDate') {
            this.formValidate.endDate = data.data.endTime
          }
          this.formValidate = Object.assign(this.formValidate, data.data)
          this.formValidate.Dates = [this.formValidate.startTime, this.formValidate.endTime]
          if (this.drillDetail.progress == 0 || this.drillDetail.progress == 1) {
            if (needChangeStep) {
              this.toPreCompeManage()
            }
            if (needServiceTime || startTimeChange) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(this.drillDetail.startTime).getTime())
            }
            this.drillStatus = 1
            this.startContestStatus = false
            this.stopContestStatus = true
          } else if (
            this.drillDetail.progress == 2 ||
            this.drillDetail.progress == 3 ||
            this.drillDetail.progress == 5
          ) {
            if (needChangeStep) {
              this.toCompeingManage()
            }
            if (needServiceTime || endTimeChange) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(this.drillDetail.endTime).getTime())
            }
            this.drillStatus = 2
            this.startContestStatus = true
            this.stopContestStatus = false
          } else if (this.drillDetail.progress == 4) {
            if (needChangeStep) {
              this.toCompeedManage()
            }
            if (needServiceTime || endTimeChange) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(this.drillDetail.endTime).getTime())
            }
            this.drillStatus = 3
            this.startContestStatus = true
            this.stopContestStatus = true
          }
          resolve()
        })
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields()
      this.iconSrc = ''
      this.formValidate.iconPath = ''
    },
    cancelLoading(modal) {
      modal.loading = false
      setTimeout(() => {
        modal.loading = true
      })
    },
    showModal() {
      this.sceneModal.show = true
      this.sceneModal.type = '2'
      this.getDrillDetail()
    },
    saveScene(name) {
      console.log(this.formValidate)
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.formValidate))
          if (!data.startTime || !data.endTime) {
            this.$Message.error('请选择时间!')
            this.cancelLoading(this.sceneModal)
            return
          }
          if (new Date(data.startTime).getTime() > new Date(data.endTime).getTime()) {
            this.$Message.error('表单输入有误，开始时间不能大于结束时间!')
            this.cancelLoading(this.sceneModal)
            return
          }
          delete data.Dates
          this.modifyScene(data.id, data, 'restart')
        } else {
          this.$Message.error('表单输入有误，请查看页面信息后重新输入!')
          this.cancelLoading(this.sceneModal)
        }
      })
    },
    saveSceneDelayTime(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.formValidate))
          delete data.Dates
          data.endTime = data.endDate
          delete data.endDate
          this.modifyScene(data.id, data, 'delay')
        } else {
          this.$Message.error('表单输入有误，请查看页面信息后重新输入!')
          this.cancelLoading(this.sceneDelayModal)
        }
      })
    },
    changEndClearConfig() {
      let data = { endClearConfig: this.endClearConfig ? 0 : 1 }
      this.modifyExtension(data, 'changeEndClearConfig')
    },
    modifyExtension(data, type) {
      let extension = { ...this.extension }
      for (let key in data) {
        extension[key] = data[key]
      }
      let formValidate = { extension: JSON.stringify(extension) }
      this.modifyScene(this.formValidate.id, formValidate, type).then(() => {
        this.drillDetail.extension = JSON.stringify(extension)
      })
    },
    modifyScene(id, data, type) {
      return new Promise((resolve, reject) => {
        modifyScene(id, data)
          .then((data) => {
            if (data.code == 1) {
              //this.$Message.info('修改演练场景成功');
              this.sceneModal.show = false
              this.sceneDelayModal.show = false
              if (type == 'delay') {
                this.$Message.info('延迟成功')
                setTimeout(() => {
                  this.getDrillDetail(false, true)
                }, 2000)
              } else if (type === 'changeEndClearConfig') {
                this.$Message.info('切换结束后是否销毁环境成功')
              } else if (type === 'changeEndClearConfig') {
                this.$Message.info('切换结束后是否销毁环境成功')
              } else {
                if (type == 'restart') {
                  this.$Message.info('重新开始演练成功')
                }
                setTimeout(() => {
                  this.getDrillDetail()
                }, 2000)
              }
              resolve()
            } else {
              this.cancelLoading(this.sceneModal)
              this.cancelLoading(this.sceneDelayModal)
              this.$Message.warning(data.message)
              reject()
            }
          })
          .catch((error) => {
            this.cancelLoading(this.sceneModal)
            this.cancelLoading(this.sceneDelayModal)
            this.$Message.error(error.message)
            reject()
          })
      })
    },
    timeChange(timeArr) {
      if (timeArr.length > 0) {
        this.formValidate.startTime = timeArr[0] ? timeArr[0] + ':00' : ''
        this.formValidate.endTime = timeArr[1] ? timeArr[1] + ':00' : ''
      }
    },
    changePreTab(name) {
      this.preDefault = name
      if (name == 'accessUser') {
      }
    },
    changeMidTab(name) {
      this.midDefault = name
      if (name == 'accessUser') {
      }
    },
    changeEndTab(name) {
      this.endDefault = name
      if (name == 'accessUser') {
      }
    },
    initPane() {
      this.preDefault = 'accessGroup'
      this.midDefault = 'targetTeamMid'
      this.endDefault = 'adwRankingStatic'
    },
    toPreCompeManage() {
      //演练前设置页面
      this.preDefault = 'accessGroup'
      this.midDefault = ''
      this.endDefault = ''
      this.currentIndex = 0
      setTimeout(() => {
        this.preCompeManagePanelShow = true
        this.compeingManagePanelShow = false
        this.compeedManagePanelShow = false
      })
    },
    toCompeingManage() {
      //演练中
      if (this.drillDetail.progress == 0 || this.drillDetail.progress == 1) {
        return
      }
      this.preDefault = ''
      this.midDefault = 'targetTeamMid'
      this.endDefault = ''
      this.currentIndex = 1
      setTimeout(() => {
        this.preCompeManagePanelShow = false
        this.compeingManagePanelShow = true
        this.compeedManagePanelShow = false
      })
    },
    toCompeedManage() {
      //演练后
      if (this.drillDetail.progress != 4) {
        return
      }
      if (this.$route.query.fromMenu == 'questionnaireSurvey') {
        this.endDefault = 'questionnaire'
      } else {
        this.endDefault = 'targetTeamMid'
      }
      this.preDefault = ''
      this.midDefault = ''
      // this.endDefault = 'targetTeamMid';
      this.currentIndex = 2
      setTimeout(() => {
        this.preCompeManagePanelShow = false
        this.compeingManagePanelShow = false
        this.compeedManagePanelShow = true
      })
    },
    // 恢复暂停的比赛
    async restoreCompetition() {
      //加一个提示-bug15794
      this.tipModal.show = true
      this.tipModal.content = '正在恢复比赛...请稍后!!'
      await this.restoreCompetition_minixs(this.drillid) //方法在recoverTime混入中
      this.tipModal.show = false
    },
    // 暂停比赛
    pauseCompetition() {
      //加一个提示-bug15794
      this.tipModal.show = true
      this.tipModal.content = '正在暂停比赛...请稍后!!'
      this.changeCompetitionStatus(5, '暂停')
    },
    changeCompetitionStatus(status, op) {
      updateSceneProgress(this.drillid, status)
        .then((data) => {
          if (data.code == 1) {
            this.$Message.info(`${op}成功`)
            this.tipModal.show = false
            this.getDrillDetail()
            if (status == 2) {
              //this.setSceneCycle();
            }
          } else {
            this.$Message.error(data.message)
            this.tipModal.show = false
          }
        })
        .catch((error) => {
          this.$Message.error(error.message)
          this.tipModal.show = false
        })
    },
    validateStart() {
      this.canStartCompete(this.drillDetail.type).then((data) => {
        this.$Message.info('校验完成')
      })
    },
    getTaskList(status) {
      if (status == 2) {
        this.canStartCompete(this.drillDetail.type).then((data) => {
          if (!data) {
            this.$Message.warning('请检查团队成员配置及任务分配是否完成')
            return
          } else {
            this.opTaskListNew(status)
          }
        })
        this.tipModal.content = '正在开始比赛...请稍后!!'
      } else {
        this.tipModal.content = '正在停止比赛...请稍后!!'
        this.opTaskListNew(status)
      }
    },
    opTaskListNew(status) {
      this.tipModal.show = true
      let str
      if (status == 2) {
        //开始
        str = 'start'
      } else {
        str = 'stop'
      }
      let params = {
        sceneId: this.$route.query.id,
        taskMode: 'preset',
        op: str
      }
      this.changeCompetitionStatus(status, status == 2 ? '开始' : '结束')
    },
    opTaskList(status) {
      this.tipModal.show = true
      let opTask = []
      //flag单次提交任务
      let params1 = {
        testId: this.$route.query.id,
        page: 1,
        rows: 10000,
        taskType: 'once_submit_flag',
        taskMode: 'preset'
      }
      let str, condition
      if (status == 2) {
        //开始
        str = 'start'
      } else {
        str = 'stop'
      }
      let p1 = new Promise((resolve, reject) => {
        getTaskList(params1).then((data) => {
          if (data.code == 1) {
            let taskList = data.data.items
            taskList.forEach((task) => {
              if (status == 2) {
                //if(task.status == 'initialized'){
                opTask.push({
                  operation: str,
                  taskId: task.id
                })
                //}
              } else if (status == 4) {
                if (task.status == 'running') {
                  opTask.push({
                    operation: str,
                    taskId: task.id
                  })
                }
              }
            })
            resolve()
          }
        })
      })
      //flag配置-外部
      let params2 = {
        testId: this.$route.query.id,
        page: 1,
        rows: 10000,
        taskType: 'once_configure_flag',
        taskMode: 'preset'
      }
      let p2 = new Promise((resolve, reject) => {
        getTaskList(params2).then((data) => {
          if (data.code == 1) {
            let taskList = data.data.items
            taskList.forEach((task) => {
              if (status == 2) {
                //if(task.status == 'initialized'){
                opTask.push({
                  operation: str,
                  taskId: task.id
                })
                //}
              } else if (status == 4) {
                if (task.status == 'running') {
                  opTask.push({
                    operation: str,
                    taskId: task.id
                  })
                }
              }
            })
            resolve()
          }
        })
      })
      //checker
      let params3 = {
        testId: this.$route.query.id,
        page: 1,
        rows: 10000,
        taskType: 'checker',
        taskMode: 'preset'
      }
      let p3 = new Promise((resolve, reject) => {
        getTaskList(params3).then((data) => {
          if (data.code == 1) {
            let taskList = data.data.items
            taskList.forEach((task) => {
              if (status == 2) {
                if (task.status == 'initialized' || task.status == 'completed') {
                  opTask.push({
                    operation: str,
                    taskId: task.id
                  })
                }
              } else if (status == 4) {
                if (task.status == 'running') {
                  opTask.push({
                    operation: str,
                    taskId: task.id
                  })
                }
              }
            })
            resolve()
          }
        })
      })
      //	    	//动态Flag配置
      //	    	let params4 = {
      //	    		"testId":this.$route.query.id,
      //              "page":1,
      //              "rows":10000,
      //              "taskType":'loop_configure_flag',
      //              "taskMode":"preset"
      //	    	}
      //	    	let p4 = new Promise((resolve,reject) => {
      //		    	getTaskList(params4).then(data => {
      //		    		if(data.code == 1){
      //		    			let taskList = data.data.items;
      //		    			taskList.forEach(task => {
      //		    				if(status == 2){
      //		    					if(task.status == 'initialized' || task.status == "completed"){
      //			    					opTask.push({
      //			    						"operation": str,
      //		    							"taskId": task.id
      //			    					})
      //			    				}
      //		    				}else if(status == 4){
      //		    					if(task.status == 'running'){
      //			    					opTask.push({
      //			    						"operation": str,
      //		    							"taskId": task.id
      //			    					})
      //			    				}
      //		    				}
      //		    			})
      //		    			resolve();
      //		    		}
      //		    	})
      //	    	})
      //	    	//数据通道
      //	    	let params5 = {
      //	    		"testId":this.$route.query.id,
      //              "page":1,
      //              "rows":10000,
      //              "taskType":'tunnel',
      //              "taskMode":"preset"
      //	    	}
      //	    	let p5 = new Promise((resolve,reject) => {
      //		    	getTaskList(params5).then(data => {
      //		    		if(data.code == 1){
      //		    			let taskList = data.data.items;
      //		    			taskList.forEach(task => {
      //		    				if(status == 2){
      //		    					if(task.status == 'initialized' || task.status == "completed"){
      //			    					opTask.push({
      //			    						"operation": str,
      //		    							"taskId": task.id
      //			    					})
      //			    				}
      //		    				}else if(status == 4){
      //		    					if(task.status == 'running'){
      //			    					opTask.push({
      //			    						"operation": str,
      //		    							"taskId": task.id
      //			    					})
      //			    				}
      //		    				}
      //		    			})
      //		    			resolve();
      //		    		}
      //		    	})
      //	    	})
      Promise.all([p1, p2, p3]).then((data) => {
        console.log(opTask)
        this.activeTask(opTask).then((data) => {
          this.changeCompetitionStatus(status, status == 2 ? '开始' : '结束')
        })
      })
    },
    activeTask(tasks) {
      let $this = this
      //          if(active=="开始"){
      //              active = "start"
      //          }else if(active=="停止"){
      //              active = "stop"
      //          }
      //          axios({
      //              url:this.GLOBAL._projPath_process +"custom/tasks/"+taskId+'/execute?operation='+active,
      //              method:'post'
      //          }).
      return new Promise((resolve, reject) => {
        if (tasks.length == 0) {
          resolve()
        }
        batchActiveTask(tasks).then((response) => {
          let activeType
          if (response.code == 1) {
            if (response.data.length > 0 && response.data.some((task) => task.code == 0)) {
              response.data.forEach((task) => {
                if (task.code == 0) {
                  $this.$Message.warning(task.message)
                }
              })
            } else {
            }
            resolve()
          } else {
            $this.$Message.error(response.message)
          }
        })
      })
    },
    //添加场景周期
    setSceneCycle() {
      setSceneCycle(this.drillid).then((data) => {
        if (data.code == 1) {
          console.log(data.message)
        } else {
          this.$Message.warning(data.message)
        }
      })
    },
    //释放资源
    clearProject() {
      this.disabledDestroy = true
      clearProject(this.$route.query.prjid)
        .then((data) => {
          if (data.code == 1 || data.code == 3) {
            this.$Message.info('环境清空中...')
            clearInterval(this.timeoutP)
            this.timeoutP = setInterval((data) => {
              this.getProjectInfo()
            }, 3000)
          } else {
            this.$Message.warning(data.message)
          }
          this.disabledDestroy = false
        })
        .catch((error) => {
          this.disabledDestroy = false
        })
    },
    showVisualization() {
      let oToken = localStorage.getItem('token')
      // window.open(
      //   `/three.test/zhyl.html?contestId=${this.$route.query.id}&token=${oToken}&projectId=${this.$route.query.prjid}&contestType=7`,
      //   '_black'
      // );
      window.open(
        `${window.location.origin}/zonghe/?sceneId=${this.$route.query.id}&token=${oToken}`,
        '_black'
      )
      //测试代码
      //window.open(
      // `http://localhost:8080/zhyl.html?contestId=${this.$route.query.id}&token=${oToken}&projectId=${this.$route.query.prjid}&contestType=7`,
      //'_black')
      // window.open(
      //  `/ScreenVisualEditor/#/viewPage?projectId=${this.projectInfo.id}&networkId=${this.networkInfo.id}`,
      //  '_black')
    },
    showVisualizationCusdom() {
      let contestId = this.$route.query.id
      let oToken = localStorage.getItem('token')
      let projectId = this.$route.query.prjid
      let name = this.$route.query.name
      //window.open(`http://localhost:8080/msgData12.html?contestId=${contestId}&token=${oToken}&projectId=${projectId}&taskName=${name}`, '_black');
      window.open(
        `${window.location.origin}/three.test12/msgData12.html?contestId=${contestId}&token=${oToken}&projectId=${projectId}&taskName=${name}`,
        '_black'
      )
    },
    hideModal() {
      this.boardModal = false
    },
    destoryProject() {
      return (
        this.disabledDestroy ||
        !this.startContestStatus ||
        !this.stopContestStatus ||
        !(this.projectInfo.status == 3 || this.projectInfo.status == 14) ||
        (JSON.parse(this.drillDetail.extension).isDistributed == 1 &&
          JSON.parse(this.drillDetail.extension).isMainRange != 1)
      )
    },
    returnPage() {
      if (this.isQuestion) {
        this.$router.push('/questionnaireSurvey')
      } else {
        this.$router.push(this.backObj)
      }
    },
    gotoReportPage() {
      const { href } = this.$router.resolve({
        name: 'zhReport',
        query: {
          id: this.$route.query.id,
          type: 7,
          prjid: this.$route.query.prjid
        }
      })
      window.open(href, '_blank')
    },
    resetEnviron() {
      this.tipModal.show = true
      this.tipModal.content = '正在重置环境...请稍后!!'
      batchOpVm(this.projectId, 'rebuild')
        .then((data) => {
          if (data.code == 1) {
            this.$Message.info('操作成功')
            this.batchOpVmLog()
          } else {
            this.$Message.error(data.message)
          }
          this.tipModal.show = false
        })
        .catch((error) => {
          this.$Message.error('环境重置失败')
          this.tipModal.show = false
        })
    },
    batchOpVmLog(isFirst) {
      batchOpVmLog(this.queryOpLogInfo)
        .then((data) => {
          if (data.code == 1) {
            if (data.data.items.length > 0) {
              //重置过
              let id = data.data.items[0].id
              this.batchOpVmLogDetail(id, isFirst)
            } else {
              //未重置
              this.resetStatus = 0
            }
          } else {
            this.$Message.error(data.messsage)
          }
        })
        .catch((error) => {
          this.$Message.error('查询重置详情失败')
        })
    },
    batchOpVmLogDetail(id, isFirst) {
      batchOpVmLogOnce(id)
        .then((data) => {
          if (data.code == 1) {
            this.resetInfo = data.data
            this.resetInfo.finished = this.resetInfo.finished || 0
            this.resetProgress = parseInt((this.resetInfo.finished / this.resetInfo.total) * 100)
            if (this.resetInfo.finished == this.resetInfo.total) {
              this.resetStatus = 2 // 重置完成
              if (this.resetInfo.msgs.filter((item) => item.errMsg).length > 0) {
                this.resetFail = true
                if (!isFirst) {
                  this.$Message.error('重置失败')
                }
              } else {
                this.resetFail = false
                if (!isFirst) {
                  this.$Message.info('重置成功')
                }
              }
            } else if (this.resetInfo.finished < this.resetInfo.total) {
              this.resetStatus = 1 //重置中
            }
            if (this.resetStatus != 2) {
              setTimeout(() => {
                this.batchOpVmLogDetail(id)
              }, 2000)
            }
          } else {
            this.$Message.error(data.messsage)
          }
        })
        .catch((error) => {
          this.$Message.error('查询重置详情失败')
        })
    },
    getResetDetail() {
      this.resetDetailModal.show = true
    },
    rebuildAllFailVm() {
      this.tipModal.show = true
      this.tipModal.content = '正在重置环境...请稍后!!'
      let proArr = this.resetInfo.msgs
        .filter((item) => item.errMsg)
        .map(async (vm) => {
          await this.rebuildVm(vm.id)
        })
      Promise.all(proArr)
        .then((data) => {
          this.tipModal.show = false
          this.$Message.info('重置完成')
        })
        .catch((error) => {
          this.$Message.info('重置失败')
        })
    },
    rebuildVm(id) {
      return new Promise((resolve, reject) => {
        rebuildVm(id)
          .then((data) => {
            if (data.code == 1) {
              resolve(data)
            } else {
              reject()
            }
          })
          .catch((error) => {
            reject()
            //this.$Message.error('重置【'+vm.name+'】失败');
          })
      })
    },
    showDelayModal() {
      this.sceneDelayModal.show = true
      this.getDrillDetail('', '', 'setEndDate')
    },
    changeEndDate(time) {
      this.formValidate.endDate = time ? time + ':00' : ''
    },
    clearSceneNoticeAndChat() {
      const msg = this.$Message.loading({
        content: '正在清空...',
        duration: 0,
        closable: true
      })
      let sceneId = this.$route.query.id
      clearSceneNoticeAndChat(sceneId)
        .then((data) => {
          setTimeout(msg, 1000)
          setTimeout(() => {
            if (data.code == 1) {
              this.$Message.info('清空成功')
              this.$refs['chatRoom'].clearChatMsg()
            } else {
              this.$Message.info('清空失败')
            }
          }, 1100)
        })
        .catch((error) => {
          setTimeout(msg, 1000)
          setTimeout(() => {
            this.$Message.info('清空失败')
          }, 1100)
        })
    },
    // 跳转演示用大屏
    showExample() {
      window.open(`/bdesigner/static/dist-update/index.html`, '_blank')
    },
    //发送数据查看定制化效果
    testCusdomEffect() {
      this.$refs.cusdomEffect.openModal()
    }
  }
}
</script>
<style scoped src="./detail.css"></style>
